<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-推广收益</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=072206" />
	</head>
	<body>
		<!-- 推广收益 --> 
		<div class="promotionIndex">
			<div class="promotionBg"></div>
			<div class="content">
				<div class="userBox">
					<img src="{$meminfo['logo']}" alt="" class="user_head">
					<div class="upgrade">
						<a href="/grade" class=""><span>去升级</span> <img src="__TMPL__/home/public/assets/img/right_jin.png" alt=""></a>
					</div>
					<div class="userInfo">
						<div class="user_top flex juscenter"><b class="ellipsis" style="max-width:4rem;text-align: right;">{$meminfo.nickname}</b><span>
							<if condition="$meminfo.grade eq 1">
								普通用户
							<elseif condition="$meminfo.grade eq 2">
								顾问
							<elseif condition="$meminfo.grade eq 3">
								星级顾问
							<else />
								联合创始人
							</if>
						</span></div>
						<div class="user_share flex juscenter"><p>邀请码：<i id="_order_umber">{$meminfo.invite}</i></p><img src="__TMPL__/home/public/assets/img/copy_1.png" alt="" id="copyOrderNum"></div>
					</div>
					<div class="promotion_info flex juscbtween">
						<div class="item">
							<b>￥{$meminfo.count_money}</b>
							<a href="/award_list"><div class="flex juscenter"><span>累计收益</span><img src="__TMPL__/home/public/assets/img/right_jin.png" alt=""></div></a>
						</div>
						<div class="item">
							<b>￥{$meminfo.money}</b>
							<a href="/award_list"><div class="flex juscenter"><span>可提现</span><img src="__TMPL__/home/public/assets/img/right_jin.png" alt=""></div></a>
						</div>
						<div class="item">
							<b>￥{$meminfo.jj_money}</b>
							<a href="/award_list"><div class="flex juscenter"><span>即将到账</span><img src="__TMPL__/home/public/assets/img/right_jin.png" alt=""></div></a>
						</div>
					</div>
				</div>
				<div class="order_profit">
					<div class="box_top flex juscbtween">
						<h3>订单收益</h3>
						<a href="/award_list" class="flex alitemCenter">
							<span>订单详情</span>
							<img src="__TMPL__/home/public/assets/img/right_2.png" alt="">
						</a>
					</div>
					<div class="order_content">
						<div class="order_check flex juscbtween">
							<div class="btn on" data-type="1">今日</div>
							<div class="btn" data-type="2">昨日</div>
							<div class="btn" data-type="3">本月</div>
							<div class="btn" data-type="4">上月</div>
						</div>
						<div class="order_money flex juscbtween">
							<div class="item">
								<p>推广订单（笔）</p>
								<h3 class="today_count">{$meminfo.today_count}</h3>
							</div>
							<div class="item">
								<p>预估收益（元）</p>
								<h3 class="today_money">{$meminfo.today_money}</h3>
							</div>
						</div>
					</div>
				</div>
				<div class="promotion_tool">
					<div class="box_top flex juscbtween">
						<h3>推广工具</h3>
					</div>
					<div class="tool_list">
						<a class="tool_item flex juscbtween" href="javascript:;" id="shareMaskShow">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/tool/01.png" alt="">
								<span>邀请好友</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
						<a class="tool_item flex juscbtween" href="/my_team">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/tool/02.png" alt="">
								<span>我的团队</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
						<!--<a class="tool_item flex juscbtween" href="">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/tool/03.png" alt="">
								<span>今日主推</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>
						<a class="tool_item flex juscbtween" href="">
							<div class="left flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/tool/04.png" alt="">
								<span>成长学院</span>
							</div>
							<div class="right flex alitemCenter">
								<img src="__TMPL__/home/public/assets/img/right.png" alt="">
							</div>
						</a>-->
					</div>
				</div>
			</div>

			<!-- 邀请海报 --> 
			<div class="inviteFriendMask close">
				<div class="tipTextBox">
					<div class="inviteFriendBox bubbling" id="inviteFriendBox">
						<img src="" alt="" id="backgroundImg">
						<div class="userInfo flex juscbtween">
							<div class="left flex alitemCenter">
								<img src="" alt="" id="userHead">
								<div class="info flex flexdirection">
									<h3 class="userName"></h3>
									<p>邀请您一起育儿育己~</p>
									<!-- <span class="inviteCode" style="white-space: nowrap">邀请码：<i id="inviteCode"></i></span> -->
								</div>
							</div>
							<div class="right">
								<img src="" alt="" id="userCode">
							</div>
						</div>
					</div>
					<div class="tipText">长按海报保存至手机</div>
				</div>
			</div>
			<div class="shareMask close">
				<div class="shareBox flex juscbtween bubbling">
					<div class="shareitem shareUrlButton">
						<img src="__TMPL__/home/public/assets/img/shareUrl.png" alt="">
						<p>分享链接</p>
					</div>
					<div class="shareitem" id="inviteShareButton">
						<img src="__TMPL__/home/public/assets/img/shareDown.png" alt="">
						<p>生成海报</p>
					</div>
				</div>
			</div>
			<!-- 引导分享 -->
			<div class="yindaoShareMask close">
				<img src="__TMPL__/home/public/assets/img/yindaoShareImg.png" alt="">
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/html2canvas.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){
			//获取海报信息
			function getUserInfo(){
				$.ajax({
					url: '/fx/invite_info',
					type: 'POST',
					data: {},
				}).done(function(res) {
					if(res.code == 200){
						var data = res.data;
						headImg = data.logo;
						$('#backgroundImg').attr('src',data.beijing);
						$('#userHead').attr('src',data.logo);
						$('.userName').html(characterLength(data.nickname,4));
						// $('#inviteCode').html(data.invite);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
				$.ajax({
					url: '/fx/invite_code',
					type: 'POST',
					data: {},
				}).done(function(res) {
					if(res.code == 200){
						var data = 'data:image/png;base64,'+res.data;
						$('#userCode').attr('src',data);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
			}
			setTimeout(function(){
				getUserInfo();
			},500)
			$('#shareMaskShow').click(function(){
				$('.shareMask').show();
			})
            $('#inviteShareButton').click(function(){
            	$('.shareMask').hide();
    //         	layer.msg('正在生成海报', {
				//   icon: 16,
				//   shade: .5
				// });
				// setTimeout(function(){
				    $('.inviteFriendMask').show();
	            	html2canvas($(".inviteFriendBox")[0],{useCORS:true,scrollY: 0,scrollX: 0}).then(function (canvas) {
				        dataURL =canvas.toDataURL("image/png");
				        $("#inviteFriendBox").html("<img src='"+dataURL+"' style='display:block; width:100%;height:100%' />");
				    });
				// },1000)
            })

		    // 字符长度限制
		    function characterLength(v, n){
		        if(v){
		            const len = v.length;
		            return len > n ? v.substr(0, n) + '...' : v
		        }else{
		            return v;
		        }
		    }

		    //点击切换tab
		    $('.order_check .btn').click(function(){
		    	$(this).addClass('on').siblings().removeClass('on');
		    	var type = $(this).attr('data-type');
		    	if(type == 1){
		    		$('.today_count').html({$meminfo.today_count});
		    		$('.today_money').html({$meminfo.today_money});
		    	}else if(type == 2){
		    		$('.today_count').html({$meminfo.zt_count});
		    		$('.today_money').html({$meminfo.zt_money});
		    	}else if(type == 3){
		    		$('.today_count').html({$meminfo.by_count});
		    		$('.today_money').html({$meminfo.by_money});
		    	}else if(type == 4){
		    		$('.today_count').html({$meminfo.sy_count});
		    		$('.today_money').html({$meminfo.sy_money});
		    	}
		    })

			//隐藏所有弹框
			$('.close').click(function(){
				$('.inviteFriendMask').hide();
				$('.yindaoShareMask').hide();
				$('.shareMask').hide();
			})

			//冒泡，禁止点击
			$('.bubbling').click(function(){
				return false;
			})
			$('.shareUrlButton').click(function(){
				$('.yindaoShareMask').show();
			})

			//复制邀请码
		   	$('#copyOrderNum').on('click', function () {
			    var val = document.getElementById('_order_umber');
			    window.getSelection().selectAllChildren(val);
			    var copyCode = document.execCommand("Copy");

			    if (copyCode) {
			      layer.msg('复制成功');
			    } else {
			      layer.msg('复制失败');
			    }
			});
		})
	</script>
</html>
